<template>
    <div id="Carousel">
        <!-- 添加轮播图 -->
        <el-carousel :interval="5000" type="card" height="400px">
            <!-- 示例海报，可根据实际情况替换 -->
            <el-carousel-item v-for="item in posters" :key="item.id">
                <img :src="item.url" :alt="item.title" style="width: 100%; height: 100%; object-fit: cover;">
            </el-carousel-item>
        </el-carousel>

        <!-- 评分排行模块 -->
        <!-- <div class="rating-ranking">
            <h2>电影评分排行</h2>
            <el-table :data="ratingRanking" style="width: 100%">
                <el-table-column prop="rank" label="排名" width="100"></el-table-column>
                <el-table-column prop="title" label="电影名称"></el-table-column>
                <el-table-column prop="rating" label="评分" width="120"></el-table-column>
            </el-table>
        </div> -->
    </div>
</template>

<script>
// import { movies } from '../utils/movieData';

export default {
  name: 'FilmReviewHome',
  data() {
    // 对电影数据按评分排序并生成排行数据
    // const sortedMovies = [...movies].sort((a, b) => b.rating - a.rating);
    // const ratingRanking = sortedMovies.map((movie, index) => ({
    //   rank: index + 1,
    //   title: movie.title,
    //   rating: movie.rating
    // }));

    return {
      // 电影海报数据
      posters: [
        { id: 1, url: 'https://q6.itc.cn/q_70/images03/20241106/505a338d4fe043ae990840cce160e690.jpeg', title: '电影海报1' },
        { id: 2, url: 'https://www.dnzhuti.com/uploads/allimg/170426/95-1F426145F8.jpg', title: '电影海报2' },
        { id: 3, url: 'https://tx-free-imgs.acfun.cn/o_1emjid2021lkd1vnq8f01skgn3p0.jpeg?imageslim', title: '电影海报3' }
      ],
      // 电影评分排行数据
      // ratingRanking: ratingRanking
    };
  }
};
</script>

<style scoped>
#Carousel {
  width: 80%;
  margin: 50px auto;
}
/* 美化轮播图 */
.el-carousel__item h3 {
  color: #fff;
}
.el-carousel__item {
  background: transparent;
}
.el-carousel__arrow {
  color: #fff;
}
.el-carousel__indicator--active button {
  background-color: #fff;
}

/* 评分排行模块样式 */
.rating-ranking {
  margin-top: 40px;
  color: #fff;
}

.rating-ranking h2 {
  margin-bottom: 20px;
}
</style>